import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const ColumChart = ({ chartData }: any) => {
  const data = [
    {
      type: '论文',
      sales: 38,
    },
    {
      type: '横向项目',
      sales: 52,
    },
    {
      type: '纵向项目',
      sales: 61,
    },
    {
      type: '报告数量',
      sales: 45,
    },
    {
      type: '人才称号',
      sales: 48,
    },
    {
      type: '申请专利',
      sales: 38,
    },
    {
      type: '专著',
      sales: 38,
    },
    {
      type: '参加会议',
      sales: 38,
    },
    {
      type: '获得奖项',
      sales: 13,
    },
    {
      type: '授权专利',
      sales: 21,
    },
    {
      type: '标准',
      sales: 13,
    },
    {
      type: '成果转化',
      sales: 3,
    },
  ];
  const config = {
    data: chartData,
    xField: 'type',
    yField: 'value',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '类别',
      },
      value: {
        alias: '数量',
      },
    },
  };
  return <Column {...config} />;
};
export default ColumChart;
